<style rel="stylesheet/scss" lang="scss" scoped>
</style>
<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="el-page-header">
          <div class="el-page-header__left" @click="crud.goBack()">
            <i class="el-icon-back"></i>
            <div class="el-page-header__title">返回</div>
          </div>
          <div class="el-page-header__content">创建调度服务</div>
        </div>
      </div>
      <div class="dataFrom">
        <el-col :span="4" style="height: 320px;padding: 30px 20px 60px 20px;">
          <el-steps direction="vertical" :active="active">
            <el-step title="AGENT信息">
              <template slot="icon">
                <img v-if="active>=1" src="../../../../assets/images/active.png" alt="" class="activepng">
                <img v-else src="../../../../assets/images/noactive.png" alt="" class="activepng">
              </template>
            </el-step>
            <el-step title="服务信息">
              <template slot="icon">
                <img v-if="active>=2" src="../../../../assets/images/active.png" alt="" class="activepng">
                <img v-else src="../../../../assets/images/noactive.png" alt="" class="activepng">
              </template>
            </el-step>
          </el-steps>
        </el-col>
        <el-col :span="20" style="padding: 30px;border-left: 1px solid #EBEEF5;min-height: 360px">
          <div v-if="active == 0">
            <el-form ref="agentForm" :model="agentForm" :rules="agentRules" label-position="left" label-width="240px">
              <el-row>
                <el-col :span="16">
                  <el-form-item label="AGENT状态" prop="agentHasInstall">
                    <el-radio-group v-model="agentHasInstall">
                      <el-radio-button label="true">已安装</el-radio-button>
                      <el-radio-button label="false">未安装</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      应用可选择的集群
                    </div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="agentHasInstall === 'true'">
                <el-col :span="16">
                  <el-form-item label="AGENT选择" prop="selectAgent">
                    <el-select v-model="agentForm.selectAgent" clearable filterable placeholder="请选择"
                               style="width: 100%;">
                      <el-option v-for="item in agentList" :key="item.agentIp" :label="item.agentName"
                                 :value="item.agentIp + ':' + item.agentPort"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      应用可选择的集群
                    </div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <div v-if="agentHasInstall === 'false'">
                <el-row>
                  <el-col :span="16">
                    <el-form-item label="名称" prop="agentName" key="agentName">
                      <el-input v-model="agentForm.agentName" show-word-limit maxlength="12"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        节点名称不多于12位，且不可重复
                      </div>
                      <i
                          class="el-icon-info hex-form-inf-icon"
                          @click="onOperInf($event)"
                          data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="16">
                    <el-form-item label="主机" prop="agentIp">
                      <el-input v-model="agentForm.agentIp" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        节点的IP地址(格式 xx.xx.xx.xx,例如:192.168.1.1)
                      </div>
                      <i
                          class="el-icon-info hex-form-inf-icon"
                          @click="onOperInf($event)"
                          data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="16">
                    <el-form-item label="端口" prop="agentPort">
                      <el-input v-model="agentForm.agentPort"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        不能多于5个字符
                      </div>
                      <i
                          class="el-icon-info hex-form-inf-icon"
                          @click="onOperInf($event)"
                          data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="16">
                    <el-form-item label="SSH用户名" prop="serverAccount">
                      <el-input v-model="agentForm.serverAccount"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        用于AGENT自动化部署和启停
                      </div>
                      <i
                          class="el-icon-info hex-form-inf-icon"
                          @click="onOperInf($event)"
                          data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="16">
                    <el-form-item label="SSH密码" prop="serverPwd">
                      <el-input v-model="agentForm.serverPwd" type="password" auto-complete="off"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        用于AGENT自动化部署和启停
                      </div>
                      <i
                          class="el-icon-info hex-form-inf-icon"
                          @click="onOperInf($event)"
                          data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="16">
                    <el-form-item label="SSH端口" prop="serverPort">
                      <el-input v-model="agentForm.serverPort" type="serverPort"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        用于AGENT自动化部署和启停
                      </div>
                      <i
                          class="el-icon-info hex-form-inf-icon"
                          @click="onOperInf($event)"
                          data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="16">
                    <el-form-item label="安装路径" prop="remoteInstallPath">
                      <el-input v-model="agentForm.remoteInstallPath"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        远程服务器安装AGENT的路径
                      </div>
                      <i
                          class="el-icon-info hex-form-inf-icon"
                          @click="onOperInf($event)"
                          data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="16">
                    <el-form-item label="服务器版本" prop="serverVer">
                      <el-input v-model="agentForm.serverVer"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        服务器操作系统版本号
                      </div>
                      <i
                          class="el-icon-info hex-form-inf-icon"
                          @click="onOperInf($event)"
                          data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="16">
                    <el-form-item label="节点描述" prop="agentDesc">
                      <el-input type="textarea" :rows="2"
                                placeholder="请输入内容"
                                v-model="agentForm.agentDesc">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        节点的特殊信息描述备注
                      </div>
                      <i
                          class="el-icon-info hex-form-inf-icon"
                          @click="onOperInf($event)"
                          data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <el-row>
                <div class="form-operator-button">
                  <el-button type="primary" @click="nextStep()">下一步</el-button>
                </div>
              </el-row>
            </el-form>
          </div>
          <div v-if="active == 1">
            <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="240px">
              <el-row>

                <el-col :span="16">
                  <el-form-item label="服务名称" prop="agentName" key="agentName">
                    <el-input v-model="form.agentName" maxlength="12" show-word-limit/>
                  </el-form-item>
                </el-col>

                <el-col :span="8" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      服务名称不多于12位，且不可重复
                    </div>
                    <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="onOperInf($event)"
                        data-status="off"
                    ></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="16">
                  <el-form-item label="服务主机">
                    <el-input v-model="form.agentIp" :disabled="true"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      服务主机跟AGENT主机是一致的
                    </div>
                    <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="onOperInf($event)"
                        data-status="off"
                    ></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="16">
                  <el-form-item label="服务端口" prop="agentPort">
                    <el-input v-model="form.agentPort"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      不能多于5个字符
                    </div>
                    <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="onOperInf($event)"
                        data-status="off"
                    ></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>

                <el-col :span="16">
                  <el-form-item label="版本号" prop="serverVer">
                    <el-select v-model="form.serverVer" filterable  placeholder="请选择" style="width: 100%;">
                      <el-option v-for="item in this.dict.server_version" :key="item.value" :label="item.label"
                                 :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      调度服务发布版本
                    </div>
                    <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="16">
                  <el-form-item label="并发数" prop="concurrentNum">
                    <el-input v-model="form.concurrentNum"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      服务上同时执行任务数阈值
                    </div>
                    <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="onOperInf($event)"
                        data-status="off"
                    ></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="16">
                  <el-form-item label="资源数" prop="resNum">
                    <el-input v-model="form.resNum"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      服务上同时执行任务的资源数总和阈值
                    </div>
                    <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="onOperInf($event)"
                        data-status="off"
                    ></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="16">
                  <el-form-item label="服务描述" prop="agentDesc">
                    <el-input type="textarea" :rows="2"
                              placeholder="请输入内容"
                              v-model="form.agentDesc">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="data_from_el-col">
                  <div class="hex-form-inf">
                    <div class="hex-form-inf-content">
                      服务的特殊信息描述备注
                    </div>
                    <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="onOperInf($event)"
                        data-status="off"
                    ></i>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <div class="form-operator-button">
                  <el-button type="primary" @click="prevStep()">上一步</el-button>
                  <el-button v-if="agentHasInstall ==='true'" type="primary" @click="save()">保存</el-button>
                  <el-button v-if="agentHasInstall ==='true'" type="primary" @click="saveAndInstall">保存并发布</el-button>
                  <el-button v-if="agentHasInstall ==='false'" type="primary" @click="saveAll()">保存</el-button>
                  <el-button v-if="agentHasInstall ==='false'" type="primary" @click="saveAndInstallAll">保存并发布
                  </el-button>
                </div>
              </el-row>
            </el-form>
          </div>
        </el-col>
      </div>
    </el-card>
  </div>
</template>

<script>
import CRUD, { form, crud } from '@crud/crud'
import agentApi from '@/api/agent/agent'
import remoteAgentApi from '@/api/agent/remoteAgent.js'
import nodeServer from '@/api/system/node'
import { isInteger, validateIP } from '@/utils/validate'
import { validatePort } from '@/utils/validate'

const defaultAgentForm = {
  agentHasInstall:true,
  pkId: null,
  selectAgent: '',
  agentCode: null,
  agentName: null,
  agentDesc: null,
  agentIp: null,
  agentPort: 80,
  agentStatus: null,
  agentHaStatus: null,
  serverVer: null,
  serverAccount: null,
  serverPwd: null,
  remoteInstallPath: '/opt/hex-agent',
  serverPort: 22,
  crtUser: null,
  upUser: null
}
const defaultForm = {
  pkId: null,
  agentCode: null,
  agentName: null,
  agentDesc: null,
  agentIp: null,
  agentPort: 80,
  agentStatus: null,
  agentHaStatus: null,
  serverVer: null,
  concurrentNum: 100,
  resNum: 1000,
  agentAdmin: null,
  serverAccount: null,
  serverPwd: null,
  keyCode: null
}
export default {
  name: 'dispatchAdd',
  components: {},
  mixins: [form(defaultForm), crud()],
  dicts: ['server_version'],
  data() {
    var validatePortExist = (rule, value, callback) => {
      if (value == '' || value == null) {
        callback(new Error('请输入端口号'))
      } else if (value === this.agentForm.agentPort) {
        callback(new Error('服务端口与AGENT端口相同'))
      }  else {
        callback()
      }
    }
    var validateAgentName = (rule, value, callback) => {
      if (value != null && value != '') {
        agentApi.checkAgentName(this.agentForm).then(res => {
          if (res === false) {
            callback(new Error('AGENT名称已存在!'))
          } else {
            callback()
          }
        })
      } else {
        callback()
      }
    }
    var validateAgentHost = (rule, value, callback) => {
      if (value != null && value != '') {
        agentApi.checkAgentHost(this.agentForm).then(res => {
          if (res === false) {
            callback(new Error('AGENT主机已存在!'))
          } else {
            callback()
          }
        })
      } else {
        callback()
      }
    }
    var validateServerPort = (rule, value, callback) => {
      if (value != null && value != '') {
        nodeServer.checkPort(this.crud.form).then(res => {
          if (res === false) {
            callback(new Error('服务端口已存在!'))
          } else {
            callback()
          }
        })
      } else {
        callback()
      }
    }
    return {
      active: 0,
      agentHasInstall: 'true',
      agentList: [],
      agentForm: JSON.parse(JSON.stringify(defaultAgentForm)),
      agentRules: {
        agentName: [
          { required: true, message: '请输入AGENT名称', trigger: 'blur' },
          { validator: validateAgentName, trigger: 'blur' }
        ],
        agentIp: [
          { required: true, message: '请输入AGENT主机', trigger: 'blur' },
          { validator: validateIP, trigger: 'blur' },
          { validator: validateAgentHost, trigger: 'blur' }
        ],
        agentPort: [
          { required: true, message: '请输入正确的AGENT端口号', trigger: 'blur' },
          { validator: validatePort, trigger: 'blur' },
        ],
        serverAccount: [
          { required: true, message: '请输入SSH用户名', trigger: 'blur' }
        ],
        serverPwd: [
          { required: true, message: '请输入SSH密码', trigger: 'blur' }
        ],
        serverPort: [
          { required: true, message: '请输入正确的SSH端口', trigger: 'blur', validator: isInteger }
        ],
        remoteInstallPath: [
          { required: true, message: '请输入AGENT安装路径', trigger: 'blur' }
        ],
        selectAgent: [
          { required: true, message: '请选择AGENT', trigger: 'change' }
        ],
        agentHasInstall: [
          { required: true, message: '请选择AGENT状态', trigger: 'change' }
        ]
      },
      rules: {
        agentName: [
          { required: true, message: '请输入服务名称', trigger: 'blur' }
        ],
        agentPort: [
          { required: true, message: '请输入服务端口', trigger: 'blur' },
          { validator: validatePort, trigger: 'blur' },
          { validator: validatePortExist, trigger: 'blur' },
          { validator: validateServerPort, trigger: 'blur' },
        ],
        concurrentNum: [
          { required: true, message: '请输入服务最大并发数', trigger: 'blur' },
          { validator: isInteger, trigger: 'change' }
        ],
        resNum: [
          { required: true, message: '请输入服务资源数', trigger: 'blur' },
          { validator: isInteger, trigger: 'change' }
        ],
        serverVer: [
          { required: true, message: '请选择调度服务版本号', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.agentHasInstall = 'true'
    this.agentForm = JSON.parse(JSON.stringify(defaultAgentForm))
    this.init()
  },
  methods: {
    init() {
      agentApi.selectAll({}).then(res => {
        this.agentList = res
      }).catch(() => {
      })
    },
    onOperInf: function(e) {
      let status = e.target.getAttribute('data-status')
      let previousNode = e.target.previousElementSibling
      if ('off' == status) {
        previousNode.setAttribute('class', 'hex-form-inf-content-show')
        e.target.setAttribute('data-status', 'on')
      } else {
        previousNode.setAttribute('class', 'hex-form-inf-content')
        e.target.setAttribute('data-status', 'off')
      }
    },
    nextStep() {
      this.$refs['agentForm'].validate((valid) => {
        if (valid) {
          if (this.agentHasInstall === 'true') {
            let info = this.agentForm.selectAgent.split(':')
            this.form.agentIp = info[0]
            this.agentForm.agentPort = info[1]
          }
          if (this.agentHasInstall === 'false') {
            this.form.agentIp = this.agentForm.agentIp
          }
          this.active++
        } else {
          return false
        }
      })
    },
    prevStep() {
      this.active--
    },
    // 只保存调度服务
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '正在保存调度服务配置......',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          remoteAgentApi.add(this.crud.form).then(res => {
            loading.close()
            this.crud.goBack()
            this.crud.toQuery()
            this.crud.notify('保存成功！', CRUD.NOTIFICATION_TYPE.SUCCESS)
          }).catch(() => {
            loading.close()
          })
        }
      })
    },
    // 只保存发布调度服务
    saveAndInstall() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '正在发布调度服务......',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          remoteAgentApi.saveAndInstall(this.crud.form).then(res => {
            loading.close()
            this.crud.goBack()
            this.crud.toQuery()
            this.crud.notify('发布成功！', CRUD.NOTIFICATION_TYPE.SUCCESS)
          }).catch(() => {
            loading.close()
          })
        }
      })
    },
    // AGENT和调度服务同时保存且发布
    saveAndInstallAll() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '正在发布......',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          const dataForm = { agentConf: this.crud.form, agentInfModel: this.agentForm }
          remoteAgentApi.saveAndInstallAll(dataForm).then(res => {
            loading.close()
            this.crud.goBack()
            this.crud.toQuery()
            this.crud.notify('发布成功！', CRUD.NOTIFICATION_TYPE.SUCCESS)
          }).catch(() => {
            loading.close()
          })
        }
      })
    },
    // AGENT和调度服务同时保存
    saveAll() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '正在保存......',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          const dataForm = { agentConf: this.crud.form, agentInfModel: this.agentForm }
          remoteAgentApi.saveAll(dataForm).then(res => {
            loading.close()
            this.crud.goBack()
            this.crud.toQuery()
            this.crud.notify('保存成功！', CRUD.NOTIFICATION_TYPE.SUCCESS)
          }).catch(() => {
            loading.close()
          })
        }
      })
    }
  }
}
</script>
<style scoped>
.form-operator-button {
  padding: 10px;
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0px;
  right: 0;
  bottom: 30px;
  height: 55px;
  text-align: center;
  -webkit-box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf .hex-form-inf-content-show {
  padding: 0 4%;
  background-color: gainsboro;
  border-radius: 8px;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}
</style>
